import React from 'react';
import ReactApexChart from 'react-apexcharts';
import { ApexOptions } from 'apexcharts';

interface ScatterDataPoint {
  x: number;
  y: number;
}

interface ScatterChartProps {
  data: ScatterDataPoint[];
  title?: string;
  height?: number;
  xTitle?: string;
  yTitle?: string;
  averageX?: number;
  averageY?: number;
}

const ScatterChart: React.FC<ScatterChartProps> = ({ 
  data, 
  title = '', 
  height = 350,
  xTitle = 'X轴',
  yTitle = 'Y轴',
  averageX,
  averageY
}) => {
  const series = [{
    name: title || '策略',
    data: data
  }];

  const annotations: any = {
    yaxis: [],
    xaxis: []
  };

  if (averageY !== undefined) {
    annotations.yaxis.push({
      y: averageY,
      borderColor: '#f43f5e',
      label: {
        borderColor: '#f43f5e',
        style: { color: '#fff', background: '#f43f5e' },
        text: '平均成交率'
      }
    });
  }

  if (averageX !== undefined) {
    annotations.xaxis.push({
      x: averageX,
      borderColor: '#f43f5e',
      label: {
        borderColor: '#f43f5e',
        style: { color: '#fff', background: '#f43f5e' },
        text: '平均触发频次'
      }
    });
  }

  const options: ApexOptions = {
    chart: {
      type: 'scatter',
      height,
      fontFamily: 'Inter, Noto Sans SC, sans-serif',
      toolbar: { show: false },
      zoom: { enabled: false },
      animations: { enabled: true, speed: 800 }
    },
    colors: ['#6366f1'],
    markers: { size: 8 },
    xaxis: {
      tickAmount: 10,
      title: { text: xTitle },
      labels: { style: { fontSize: '12px' } }
    },
    yaxis: {
      tickAmount: 7,
      title: { text: yTitle }
    },
    annotations,
    tooltip: {
      x: { formatter: (val) => `${val} 次` },
      y: { formatter: (val) => `${val}%` }
    },
    legend: {
      position: 'bottom',
      horizontalAlign: 'center',
      fontWeight: 500,
      offsetY: 5
    }
  };

  return (
    <ReactApexChart 
      options={options} 
      series={series} 
      type="scatter" 
      height={height} 
    />
  );
};

export default ScatterChart; 